<template>
  <view :class="['h-modal-wrap', show ? 'h-modal-show' : 'h-modal-hide']" v-if="isShow">
    <view class="h-modal-bg"></view>
    <view class="h-modal-content">
      <view class="h-modal-title" v-if="title">{{title}}</view>
      <view class="h-modal-contents" v-if="content">{{content}}</view>
      <view class="h-modal-footer" v-if="cancelText || confirmText">
        <view class="h-modal-btn h-modal-cancel" @tap="handleCancel">{{cancelText}}</view>
        <view class="h-modal-btn h-modal-confirm" @tap="handleConfirm">{{confirmText}}</view>
      </view>
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "hModal",
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    cancelText: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      show: false,
      isShow: false
    }
  },
  mounted() {
    this.isShow = this.visible
    this.show = this.visible
  },
  computed: {

  },
  methods: {
    handleCancel() {
      this.show = false
      this.$emit('cancel', '')
    },
    handleConfirm() {
      this.show = false
      this.$emit('confirm', '')
    }
  },
  watch: {
    visible(val) {
      if(val) {
        this.isShow = val
        setTimeout(() => {
          this.show = val
        }, 20)
      }
      else {
        this.show = val
        setTimeout(() => {
          this.isShow = val
        }, 100)
      }

    }
  }
}
</script>

<style>
.h-modal-wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  transition: all 200ms ease-in;
  opacity: 0;
  z-index: 99999;
}
.h-modal-show {
  opacity: 1;
}
.h-modal-hide {
  opacity: 0;
}
.h-modal-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}
.h-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480rpx;
  min-height: 380rpx;
  height: auto;
  border-radius: 10rpx;
  background-color: #fff;
  overflow: hidden;
}
.h-modal-title {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 14rpx 20rpx;
  color: #333;
  font-size: 28rpx;
  text-align: center;
  border-bottom: 1PX solid #e5e5e5;
}
.h-modal-contents {
  min-height: 160rpx;
  max-height: 540rpx;
  overflow-y: auto;
  color: #333;
  font-size: 24rpx;
  box-sizing: border-box;
  width: auto;
  padding: 28rpx 20rpx 112rpx;
}
.h-modal-footer {
  border-top: 1PX solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80rpx;
  position: absolute;
  left: 0;
  bottom: 0;
}
.h-modal-btn {
  width: 240rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  font-size: 24rpx;
  background-color: #fff;
}
.h-modal-cancel {
  border-right: 1PX solid #e5e5e5;
}
.h-modal-confirm {
  color: #6190e8;
}
</style>
